<template>
	<view class="nav-box bg-color1">
		<fui-nav-bar title="搭子详情" @leftClick="leftClick">
			<fui-icon name="arrowleft"></fui-icon>
		</fui-nav-bar>
	</view>
	<view class="detail-box bg-color1">
		<!-- 头像区域 -->
		<view class="avatar-box">
			<fui-avatar :src="detailData.img" width="200"></fui-avatar>
			<view class="col2 flex-col-center">
				<view class="name">{{ detailData.userName }}</view>
				<view class="status-age-box">
					<view class="online"><view>在线</view></view>
					<view class="age">{{ detailData.age }}岁</view>
				</view>
			</view>
		</view>
		<!-- 基本资料区域 -->
		<view class="basic-info-box">
			<view class="header">基本资料</view>
			<view class="tags-box">
				<view class="info-item">
					<fui-icon size="26" color="#aaaaff" custom-prefix="fui-custom-icon" name="icon-shengao"></fui-icon>
					<text>{{ detailData.height }}cm</text>
				</view>
				<view class="info-item">
					<fui-icon size="26" color="#aa557f" custom-prefix="fui-custom-icon" name="icon-weight"></fui-icon>
					<text>{{ detailData.weights }}斤</text>
				</view>
				<view class="info-item">
					<fui-icon size="30" color="#ffaa00" name="aftersale"></fui-icon>
					<text>{{ detailData.price }}元/时</text>
				</view>
			</view>
		</view>
		<!-- 图文介绍区域 -->
		<view class="text-img-intro-box">
			<view class="text-intro">
				{{ detailData.introduce }}
			</view>
			<view class="photos">
				<image v-for="(item, i) of detailData.imageList" :key="i" :src="item" mode=""></image>
			</view>
		</view>
		<!-- 按钮区域 -->
		<fui-movable-view bottom="400" right="60">
			<view class="fui-fab--box btn1" @click="chatStore.chatHandler(`C2C${detailData.userId}`, detailData.img, detailData.userName)">聊天</view>
		</fui-movable-view>
		<fui-movable-view bottom="258" right="60">
			<view class="fui-fab--box btn2" @click="inviteHandler">邀约</view>
		</fui-movable-view>
		<fui-movable-view right="60">
			<view class="fui-fab--box btn3" @click="callHandler">电话</view>
		</fui-movable-view>
		<!-- 顶部弹出层 -->
		<fui-bottom-popup background="#eaeaea" :show="show" @close="closePopup">
			<view class="fui-custom-wrap">
				<view class="order-info-box common-style">
					<view class="row1 flex-center">
						<view class="h-box flex-center">
							<view class="name">赵蝶</view>
							<view class="price">10元/小时</view>
						</view>
					</view>
					<view class="row2">
						<view class="label">预约时间</view>
						<view class="time-wrap flex-row-between-center">
							<view class="show-time-box flex-row-between-center">
								<view class="startDate">{{ startDateStr }}</view>
								<view class="hours flex-center">{{ hour }}小时</view>
								<view class="endDate">{{ startDateStr }}</view>
							</view>
							<fui-icon name="edit" size="30" @click="chooseHandler" color="#ce8900"></fui-icon>
						</view>
					</view>
				</view>
				<view style="margin-top: 20rpx">支付方式</view>
				<view class="pay-box common-style">
					<fui-radio-group name="radio" :model-value="payMethod" @change="radioChange">
						<view class="radio-box radio1">
							<fui-label>
								<view class="radio flex-row-between-center">
									<view class="text-box fle-row-align-center">
										<image class="logo" src="../static/weixin.png" mode=""></image>
										<text class="fui-text">微信支付</text>
									</view>
									<fui-radio value="1" checked></fui-radio>
								</view>
							</fui-label>
						</view>
						<view class="radio-box radio2">
							<fui-label>
								<view class="radio flex-row-between-center">
									<view class="text-box fle-row-align-center">
										<image class="logo" src="../static/pay-zhifubao.png" mode=""></image>
										<text class="fui-text">支付宝</text>
									</view>
									<fui-radio value="2"></fui-radio>
								</view>
							</fui-label>
						</view>
					</fui-radio-group>
				</view>
				<view class="settle-box flex-row-between-center common-style">
					<view class="money">￥{{ 10 }}</view>
					<view class="btn-box">
						<button class="submit-btn" style="">提交订单</button>
					</view>
				</view>
			</view>
		</fui-bottom-popup>
		<fui-date-picker
			:value="defaultStartDate"
			:min-date="minDate"
			:max-date="maxDate"
			:hour-range="hourRange"
			height="420"
			range
			:show="showTimeSeletor"
			type="5"
			@change="datePickerchange"
			@cancel="cancel"
		></fui-date-picker>
	</view>

	<!-- <view class="avatar">
		<view class="user_img">
			<image src="../static/userPic.jpg" mode=""></image>
		</view>
		<view class="name">
			<text>张小姐</text>
			<view class="id">id：123456789</view>
		</view>
	</view>
	<view class="info">
		<view class="blurb">
			个人简介：本人诚实，热情，具有良好的人际关系，极富创造力与创新意识，具有较强的逻辑思维和组织协调能力，对事情认真，负责，有很强的责任心和团队精神，为人自信，乐观，处事冷静，服从领导安排，吃苦耐劳等。
		</view>
		<fui-section title="生活照" isLine marginTop="50" marginBottom="30" :padding="['0', '0', '0', '0']"></fui-section>
		<view class="lifePic">
			<image v-for="(item, index) in lifePhotos" :src="item.url" mode=""></image>
			<view style="width: 100%; height: 200rpx"></view>
		</view>
	</view>
	<fui-bottom-navbar :items="options" left="8" @init="init" @click="onClick"></fui-bottom-navbar> -->
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue';
import { useCounterStore, useFunctionStore } from '@/store/equipment/index.js';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { reqPartnerDetailApi } from '@/request/modules/daz.js';
import { showMsg } from '../utils/interact';
import getDateStr from '../utils/date-format';
import useChatStore from '../store/chat';

const now = new Date();
// ref数据
const detailData = ref({});

const data = reactive({
	show: false,
	showTimeSeletor: false,
	startDateStr: getDateStr(5), //start：默认当前小时数
	endDateStr: getDateStr(5, new Date(now.setHours(now.getHours() + 1))), //end：默认当前小时数加一小时
	hour: 1,
	defaultStartDate: getDateStr(),
	minDate: getDateStr(2, new Date(now.setDate(now.getDate()))),
	maxDate: getDateStr(2, new Date(now.setDate(now.getDate() + 4))),
	hourRange: [8, 23],
	payMethod: '1'
});
const { show, showTimeSeletor, startDateStr, endDateStr, hour, minDate, maxDate, hourRange, defaultStartDate, payMethod } = toRefs(data);
const functionStore = useFunctionStore();
const leftClick = () => {
	functionStore.navigateBack();
};
// 仓库对象
const chatStore = useChatStore();
//事件回调
const callHandler = () => {
	uni.makePhoneCall({
		phoneNumber: '18230790344'
	});
};
//打开邀约弹出层
const inviteHandler = () => {
	data.show = true;
};
//关闭弹出层
const closePopup = () => {
	data.show = false;
};
// 点击修改邀约时间
const chooseHandler = () => {
	data.showTimeSeletor = true;
};
// 点击关闭日期选择器
const cancel = () => {
	data.showTimeSeletor = false;
};
// 日期选择器的确认事件
const datePickerchange = (event) => {
	let { startDate, endDate } = event;
	data.showTimeSeletor = false;
	data.startDateStr = startDate.result.replace('2024-', '');
	data.endDateStr = endDate.result.replace('2024-', '');
	data.hour = endDate.hour - startDate.hour;
};
// 单选框的改变
const radioChange = (event) => {
	data.payMethod = event.detail.value;
	console.log(data.payMethod);
};
//跳转聊天界面
/* const goChat=(userID)=>{
  uni.navigateTo({
    url:`/TUIKit/components/TUIChat/index?conversationID=C2C${+userID}`
  })
} */
// 生命周期函数
//监听页面加载
onLoad((params) => {
	getDazDetail(params.id);
});

// api请求函数
async function getDazDetail(id) {
	const res = await reqPartnerDetailApi({ id });
	if (res.statusCode !== 200) showMsg('获取数据失败', 'error');
	detailData.value = res.data;
	// console.log(detailData.value);
}
</script>

<style scoped lang="scss">
// 顶部标题区域
.nav-box {
}
// 详情区
.detail-box {
	border-radius: 20px 20px 0 0;
	margin: 10px;
	// 头像区域
	.avatar-box {
		display: flex;
		color: #000000;
		font-weight: bold;
		margin-bottom: 38rpx;
		padding: 30rpx;
		.col2 {
			margin-left: 14px;
			.name {
				font-size: 20px;
				margin-bottom: 10px;
			}
			.status-age-box {
				display: flex;
				padding: 5rpx 14rpx;
				align-items: center;
				background-color: rgba(0, 0, 0, 0.4);
				backdrop-filter: blur(20px);
				border-radius: 20px;

				&::before {
					width: 10px;
					height: 10px;
					display: block;
					content: '';
					border-radius: 50%;
					background-image: radial-gradient(#28ff4f 2px, #127323);
					margin-right: 10rpx;
				}

				.online {
					display: flex;
					align-items: center;
					color: green;
					view {
						padding-right: 10rpx;
					}
					&::after {
						width: 1px;
						height: 10px;
						content: '';
						display: block;
						background-color: #fff;
					}
				}
				.age {
					color: #fff;
					margin-left: 7px;
				}
			}
		}
	}
	//  图文介绍区域
	.text-img-intro-box {
		margin-top: 20px;
		.text-intro {
			line-height: 46rpx;
			padding: 0 20rpx;
			font-size: 17px;
		}
		.photos {
			margin-top: 40rpx;
			image {
				width: 100%;
				height: 620rpx;
			}
		}
	}
	// 底部弹出层
	.fui-custom-wrap {
		margin: 12px;

		.common-style {
			background: $uni-bg-color;
			border-radius: $uni-border-radius-lg;
			padding: 12rpx;
		}
		.order-info-box {
			.row1 {
				.h-box {
					width: fit-content;
					border-bottom: 3px #28ff4f solid;
					.name {
						margin-right: 10px;
					}
				}
			}
			.label {
				color: $uni-text-color-grey;
			}
			.row2 {
				margin-top: 10px;
				.time-wrap {
					display: flex;

					.show-time-box {
						margin-right: 5px;
						.startDate {
							margin-right: 40rpx;
						}
						.hours {
							color: $uni-text-color-grey;
							&::before {
								content: '';
								display: block;
								width: 20rpx;
								height: 1px;
								background: gray;
							}
							&::after {
								content: '';
								display: block;
								width: 20rpx;
								height: 1px;
								background: gray;
							}
						}
						.endDate {
							margin-left: 40rpx;
						}
					}
				}
			}
		}

		.pay-box {
			.radio-box {
				.radio {
					.text-box {
						.fui-text {
							margin-right: 10px;
						}
						.logo {
							width: 20px;
							height: 20px;
							margin-right: 10px;
						}
					}
				}
			}
			.radio1 {
				margin-bottom: 10px;
			}
		}

		.settle-box {
			margin-top: 10px;
			.money {
				font-size: $uni-font-size-lg;
				color: red;
			}
			.btn-box {
				.submit-btn {
					background: #ffaa00;
				}
			}
		}
	}

	//基本资料区域
	.basic-info-box {
		padding: 0 20rpx;
		.header {
			margin-top: 10px;
			color: $uni-text-color-grey;
			padding-bottom: 20rpx;
		}
		.tags-box {
			display: flex;
			.info-item {
				line-height: 30px;
				width: fit-content;
				background-color: #ececec;
				border-radius: 20px;
				padding: 4rpx 20rpx;
				margin-right: 20rpx;
				color: #333;
				font-size: 24rpx;
				text {
					margin-left: 10rpx;
				}
			}
		}
	}

	// 按钮区域
	.fui-fab--box {
		width: 78rpx;
		height: 78rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.btn1 {
		background-color: hotpink;
	}
	.btn2 {
		background-color: #ffaa00;
	}
	.btn3 {
		background-color: #34d;
	}
}
/* .avatar {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	.user_img {
		width: 200rpx;
		height: 200rpx;
		background: #f6f6f6;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
		}
	}
	.name {
		margin-left: 20rpx;
		text {
			font-size: 36rpx;
			font-weight: bold;
		}
		.id {
			font-size: 28rpx;
			color: #999;
			margin-top: 10rpx;
		}
	}
}
.info {
	padding: 20rpx 30rpx;
	padding-bottom: 200rpx;
	box-sizing: border-box;
	.blurb {
		font-size: 28rpx;
		color: #666;
	}
	.lifePic {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		margin-top: 20rpx;
		image {
			width: 32%;
			height: 300rpx;
			margin-left: 1%;
			margin-top: 1%;
			border-radius: 10rpx;
			float: left;
		}
	}
} */
</style>
